
<!DOCTYPE html> 
<html> 
<head> 
  <meta charset="UTF-8"> 
  <title>Title</title> 
  <script src="resources/jquery/jquery-3.0.0.js"></script>
  <style type="text/css">
  .div1{
  width:50px;height:50px
  }
  
  </style> 
</head> 
<body> 
<img id="image"src=""/> 
<br/> 
<input type="file"onchange="selectImage(this);"/> 
<br/> 
<input type="button"onclick="uploadImage();"value="提交"/>
<div class="div1">
<img alt="" src="g:\imgs\2017\10\11\9b80d047-4e8e-40bf-9bc7-cf8f31e80576.jpg">
</div> 
<script> 
  var image = ''; 
  function selectImage(file){ 
    if(!file.files || !file.files[0]){ 
      return; 
    } 
    var reader = new FileReader(); 
    reader.onload = function(evt){ 
      document.getElementById('image').src = evt.target.result; 
      image = evt.target.result; 
    } 
    reader.readAsDataURL(file.files[0]); 
  } 
  function uploadImage(){ 
    image = JSON.stringify(image) 
    $.ajax({ 
  
      type:'POST', 
  
      url: '/blog/test', 
  
      data: {base64: image 
      }, 
  
      async: false, 
  
      dataType: 'json', 
  
      success: function(data){ 
alert(data.success) 
        if(data.success){ 
  
          alert('上传成功'); 
  
        }else{ 
  
          alert('上传失败'); 
  
        } 
  
      }, 
  
      error: function(err){ 
  
        alert('网络故障'); 
  
      } 
  
    }); 
  
  } 
</script> 
<script src="jquery/jquery-3.2.1.min.js"></script> 
</body> 
</html> 
